<template>
    <div class="visual-box">
        <!-- 消费金额 -->
        <div class="data-box">
            <h3>消费金额</h3>
            <ul>
                <li>
                    <h4>今日消费</h4>
                    <div>
                        <div class="orderActual">
                            <p>{{todayPerfor.orderAmount | sumFilters}} <i>(订单)</i></p>
                            <p>{{todayPerfor.orderVoucher | sumFilters}} <i>(实际)</i></p>
                        </div>
                        <span>{{todayPerfor.amount | sumFilters}}</span>
                    </div>
                </li>
                <li>
                    <h4>本周消费</h4>
                    <div>
                        <div class="orderActual">
                            <p>{{weekPerfor.orderAmount | sumFilters}} <i>(订单)</i></p>
                            <p>{{weekPerfor.orderVoucher | sumFilters}} <i>(实际)</i></p>
                        </div>
                        <span>{{weekPerfor.amount | sumFilters}}</span>
                    </div>
                </li>
                <li>
                    <h4>本月消费</h4>
                    <div>
                        <div class="orderActual">
                            <p>{{monthPerfor.orderAmount | sumFilters}} <i>(订单)</i></p>
                            <p>{{monthPerfor.orderVoucher | sumFilters}} <i>(实际)</i></p>
                        </div>
                        <span>{{monthPerfor.amount | sumFilters}}</span>
                    </div>
                </li>
                <li>
                    <h4>累计消费</h4>
                    <div>
                        <div class="orderActual">
                            <p>{{totalPerfor.orderAmount | sumFilters}} <i>(订单)</i></p>
                            <p>{{totalPerfor.orderVoucher | sumFilters}} <i>(实际)</i></p>
                        </div>
                        <span>{{totalPerfor.amount | sumFilters}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="chart-box">
            <div id="chartPerfor" style="width:100%;height:300px;"></div>
        </div>

        <!-- 成交单量 -->
        <div class="data-box">
            <h3>成交单量</h3>
            <ul>
                <li>
                    <h4>今日成交（单）</h4>
                    <div>
                        <p>{{todayOrderNum}}</p>
                    </div>
                </li>
                <li>
                    <h4>本周成交（单）</h4>
                    <div>
                        <p>{{weekOrderNum}}</p>
                    </div>
                </li>
                <li>
                    <h4>本月成交（单）</h4>
                    <div>
                        <p>{{monthOrderNum}}</p>
                    </div>
                </li>
                <li>
                    <h4>累计成交（单）</h4>
                    <div>
                        <p>{{yearOrderNum}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="chart-box">
            <div id="closingDeal" style="width:100%;height:300px;"></div>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import {getCmBrokerageSelectOrderByEchartApi,getCmBrokerageSelectCountByEchartApi} from "@/wss/newApi_3-24/financial/cmBrokerage.js"
import {transferTime} from "@/wss/utils/wss.js"
export default {
    name:'Visual',
    props:{
        selectItem:{
            type: Object,
            default: {},
        }
    },
    data(){
        return{
            //今日业绩
            todayPerfor:{
                amount: 0,
                orderAmount: 0,
                orderVoucher: 0,
            },
            //本周业绩
            weekPerfor:{
                amount: 0,
                orderAmount: 0,
                orderVoucher: 0,
            },
            //本月业绩
            monthPerfor:{
                amount: 0,
                orderAmount: 0,
                orderVoucher: 0,
            },
            //累计业绩
            totalPerfor:{
                amount: 0,
                orderAmount: 0,
                orderVoucher: 0,
            },

            todayOrderNum: 0,// 今日成交
            weekOrderNum: 0,// 本周成交
            monthOrderNum: 0,// 本月成交
            yearOrderNum: 0,// 累计成交

            // 消费金额x轴
            dataPerforX:[],
            // 我的抽成
            commission:[],
            // 消费金额
            performance:[],

            // 成交单量x轴
            closingDealX:[],
            // 成交单量
            closingDealList:[]
        }
    },
    mounted(){
        
    },
    watch:{
        selectItem(newValue,oldValue){
            if(this.selectItem.userId){
                this.getTodayPerfor()// 获取今日的消费数据
                this.getWeekPerfor()// 获取本周消费数据
                this.getMonthPerfor()// 获取本月消费数据
                this.getYearPerfor()// 获取今年消费数据
                this.getPerforDate()// 获取图表消费的数据

                this.getTodayTurnover()// 获取今日的成交单量
                this.getWeekTurnover()// 获取本周的成交单量
                this.getMonthTurnover()// 获取本月的成交单量
                this.getYearTurnover()// 获取今年的成交单量
                this.getClinchDate()// 获取成交单量的数据
            }
        },
    },
    methods:{

        // 消费金额 --------------------------------------------------------
        // 获取今日的消费数据
        async getTodayPerfor(){
            let today = new Date()
            let start = transferTime(today)
            let arr = await this.getCmBrokerageSelectOrderByEchart(start,start)
            if(arr.length){
                // 有获取到就赋值
                this.todayPerfor = arr[0]
            }else{
                this.todayPerfor = {
                    amount: 0,
                    orderAmount: 0,
                    orderVoucher: 0,
                }
            }
        },
        
        // 获取本周消费数据
        async getWeekPerfor(){
            let start = this.weekFirt() //第一天
            let end = this.weekLast() //最后一天
            let arr = await this.getCmBrokerageSelectOrderByEchart(start,end)
            if(arr.length){
                // 有获取到就赋值
                arr.forEach(item => {
                    this.weekPerfor.amount = this.weekPerfor.amount + Number(item.amount)
                    this.weekPerfor.orderAmount = this.weekPerfor.orderAmount + Number(item.orderAmount)
                    this.weekPerfor.orderVoucher = this.weekPerfor.orderVoucher + Number(item.orderVoucher)
                });
            }else{
                this.weekPerfor = {
                    amount: 0,
                    orderAmount: 0,
                    orderVoucher: 0,
                }
            }
        },
        // 获取本月消费数据
        async getMonthPerfor(){
            let start = this.monthFirst() //第一天
            let end = this.monthLast() //最后一天
            let arr = await this.getCmBrokerageSelectOrderByEchart(start,end)
            if(arr.length){
                // 有获取到就赋值
                arr.forEach(item => {
                    this.monthPerfor.amount = this.monthPerfor.amount + Number(item.amount)
                    this.monthPerfor.orderAmount = this.monthPerfor.orderAmount + Number(item.orderAmount)
                    this.monthPerfor.orderVoucher = this.monthPerfor.orderVoucher + Number(item.orderVoucher)
                });
            }else{
                this.monthPerfor = {
                    amount: 0,
                    orderAmount: 0,
                    orderVoucher: 0,
                }
            }
        },

        // 获取今年消费数据
        async getYearPerfor(){
            // let start = this.yearFirst() //第一天
            let createTime = this.selectItem.createTime.split(" ")[0] //创建时间
            let end = this.yearLast() //最后一天
            let arr = await this.getCmBrokerageSelectOrderByEchart(createTime,end)
            if(arr.length){
                // 有获取到就赋值
                arr.forEach(item => {
                    this.totalPerfor.amount = this.totalPerfor.amount + Number(item.amount)
                    this.totalPerfor.orderAmount = this.totalPerfor.orderAmount + Number(item.orderAmount)
                    this.totalPerfor.orderVoucher = this.totalPerfor.orderVoucher + Number(item.orderVoucher)
                });
            }else{
                this.totalPerfor = {
                    amount: 0,
                    orderAmount: 0,
                    orderVoucher: 0,
                }
            }
        },

        // 获取当前用户的消费数据
        async getCmBrokerageSelectOrderByEchart(start,end){
            let params = {
                userid: this.selectItem.userId,
                userType: "2",//1商务 2渠道
                start: start,
                end: end,
                isDay: 1,
            }
            let result = await getCmBrokerageSelectOrderByEchartApi(params)
            if(result.code == 200){
                if(result.data){
                    return result.data
                }
            }
        },

        // 获取图表消费的数据
        async getPerforDate(){
            //获取前15天的每一天日期 dataPerforX
            this.dataPerforX = []
            for (let i = -14; i <= 0; i++) {
                // 转成 220705
                let day = this.getFrontDay(i).split('-')
                day[0] = day[0].substring(2,4)
                this.dataPerforX.push(day.join(''))
            }

            // 获取前15天的数据
            let start = this.getFrontDay(-14) //包含今天所以传-14
            let today = new Date()
            let end = transferTime(today)
            let arr = await this.getCmBrokerageSelectOrderByEchart(start,end)

            // 把获取过来的数据 日期转成 220705
            arr.forEach(item=>{
                let t = item.createTime.split(' ')[0]
                let day = t.split('-')
                day[0] = day[0].substring(2,4)
                item.day = day.join('')
            })
            // 根据day日期排序
            let newArr = arr.sort((a, b) => Number(a.day)- Number(b.day))

            // 循环赋值给 commission我的抽成 和 performance消费
            this.commission = [] //先清除我的抽成
            this.performance = [] //先清除消费
            this.dataPerforX.forEach((per,i)=>{
                let obj = newArr.find(item=>{
                    return per == item.day
                })
                if(obj){
                    // 日期对上了就赋值抽成和业绩
                    this.performance[i] = Number(obj.orderVoucher)
                    this.commission[i] = Number(obj.amount)
                }else{
                    // 日期没有对上了就不赋值
                    this.performance[i] = 0
                    this.commission[i] = 0
                }
            })

            this.chartPerfor()// 渲染消费金额图表
        },
        // 消费金额 --------------------------------------------------------end

        // 成交单量 --------------------------------------------------------

        // 获取今日的成交单量
        async getTodayTurnover(){
            let today = new Date()
            let start = transferTime(today)
            let arr = await this.getCmBrokerageSelectCountByEchart(start,start)
            if(arr.length){
                // 有获取到就赋值
                this.todayOrderNum = arr[0].orderNum
            }else{
                this.todayOrderNum = 0
            }
        },

        // 获取本周的成交单量
        async getWeekTurnover(){
            let start = this.weekFirt() //第一天
            let end = this.weekLast() //最后一天
            let arr = await this.getCmBrokerageSelectCountByEchart(start,end)
            if(arr.length){
                // 有获取到就赋值
                arr.forEach(item => {
                    this.weekOrderNum = this.weekOrderNum + Number(item.orderNum)
                });
            }else{
                this.weekOrderNum = 0
            }
        },

        // 获取本月的成交单量
        async getMonthTurnover(){
            let start = this.monthFirst() //第一天
            let end = this.monthLast() //最后一天
            let arr = await this.getCmBrokerageSelectCountByEchart(start,end)
            if(arr.length){
                // 有获取到就赋值
                arr.forEach(item => {
                    this.monthOrderNum = this.monthOrderNum + Number(item.orderNum)
                });
            }else{
                this.monthOrderNum = 0
            }
        },

        // 获取今年的成交单量
        async getYearTurnover(){
            // let start = this.yearFirst() //第一天
            let createTime = this.selectItem.createTime.split(" ")[0] //创建时间
            let end = this.yearLast() //最后一天
            let arr = await this.getCmBrokerageSelectCountByEchart(createTime,end)
            if(arr.length){
                // 有获取到就赋值
                arr.forEach(item => {
                    this.yearOrderNum = this.yearOrderNum + Number(item.orderNum)
                });
            }else{
                this.yearOrderNum = 0
            }
        },

        // 获取当前商务的成交单量
        async getCmBrokerageSelectCountByEchart(start,end){
            let params = {
                userid: this.selectItem.userId,
                userType: "2",//1商务 2渠道
                start: start,
                end: end,
                isDay: 1,
            }
            let result = await getCmBrokerageSelectCountByEchartApi(params)
            if(result.code == 200){
                if(result.data){
                    return result.data
                }
            }
        },

        // 获取成交单量的数据
        async getClinchDate(){
            //获取前15天的每一天日期 closingDealX
            this.closingDealX = []
            for (let i = -14; i <= 0; i++) {
                // 转成 220705
                let day = this.getFrontDay(i).split('-')
                day[0] = day[0].substring(2,4)
                this.closingDealX.push(day.join(''))
            }

            // 获取前15天的数据
            let start = this.getFrontDay(-14) //包含今天所以传-14
            let today = new Date()
            let end = transferTime(today)
            let arr = await this.getCmBrokerageSelectCountByEchart(start,end)

            // 把获取过来的数据 日期转成 220705
            arr.forEach(item=>{
                let t = item.createTime.split(' ')[0]
                let day = t.split('-')
                day[0] = day[0].substring(2,4)
                item.day = day.join('')
            })
            // 根据day日期排序
            let newArr = arr.sort((a, b) => Number(a.day)- Number(b.day))

            // 循环赋值给 closingDealList
            this.closingDealList = []
            this.closingDealX.forEach((per,i)=>{
                let obj = newArr.find(item=>{
                    return per == item.day
                })
                if(obj){
                    // 日期对上了就赋值单量
                    this.closingDealList[i] = Number(obj.orderNum)
                }else{
                    // 日期没有对上了就不赋值
                    this.closingDealList[i] = 0
                }
            })

            this.closingDeal() // 渲染成交单量图表
        },

        // 成交单量 --------------------------------------------------------end

        // 获取时间的回调----------------------------------------------------

        //本周第一天
        weekFirt(){
            const date = new Date();
            let week = date.getDay() //星期
            if (week === 0) week = 7
            let weekFirstDay = new Date(date - (week - 1) * 86400000)
            return transferTime(weekFirstDay)
        },

        // 本周最后一天
        weekLast(){
            const date = new Date();
            let week = date.getDay() //星期
            if (week === 0) week = 7
            var weekFirstDay = new Date(date - (week - 1) * 86400000)
            var weekLastDay = new Date((weekFirstDay / 1000 + 6 * 86400) * 1000)
            return transferTime(weekLastDay)
        },

        //获取本月第一天
        monthFirst(){
            let startTime = new Date()
            startTime.setDate(1) //获取本月第一天
            return transferTime(startTime) // transferTime 转成yyyy-mm-dd
        },

        //获取本月最后一天
        monthLast(){
            let date = new Date()
            let endTime = new Date(date.getFullYear(), date.getMonth() + 1, 0)
            return transferTime(endTime) // transferTime 转成yyyy-mm-dd
        },

        //获取今年第一天
        yearFirst(){
            var date = new Date();
            var year = date.getFullYear();
            var firstMonth = year + '-' + '01' + '-' + '01';
            return firstMonth
        },

        //获取今年最后一天
        yearLast(){
            var lastDay = new Date();
            lastDay.setFullYear(lastDay.getFullYear()+1);
            lastDay.setDate(0);
            lastDay.setMonth(-1);
            return transferTime(lastDay)
        },
        
        // 获取前15天的第一天 num=-15 负多少就是前多少天
        getFrontDay(num){
            var dd = new Date();
            dd.setDate(dd.getDate() + (num));//获取p_count天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;//获取当前月份的日期
            if (m < 10) {
                m = '0' + m;
            }
            var d = dd.getDate();
            if (d < 10) {
                d = '0' + d;
            }
            return y + "-" + m + "-" + d;
        },

        // 获取时间的回调---------------------------------------------------- end

        //消费金额图表
        chartPerfor(){
            const perforCharts = echarts.init(document.getElementById('chartPerfor'));
            perforCharts.setOption({
                //提示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type:'none',
                    },
                    backgroundColor:'rgba(0,0,0,0.8)',
                    padding: [11, 20],
                    formatter: `
                        <div class="tooltip-box">
                            <h3>{b}</h3>
                            <p>
                                <i></i><b>{a1}</b><b>￥{c1}</b>
                            </p>
                            <p>
                                <i></i><b>{a0}</b><b>￥{c0}</b>
                            </p>
                        </div>
                    `,
                },
                //图例
                legend: {
                    data: ['商务业绩', '我的抽成'],
                    left:0,
                    icon: "circle",
                    itemWidth: 8, //矩形宽度
                    itemHeight: 8, //矩形高度
                },
                //x轴配置
                xAxis:{
                    //数据
                    data: this.dataPerforX,
                    axisLine:{//线
                        show:false
                    },
                    axisTick:{//刻度
                        show:false
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        textStyle: {
                            color: "#909AAA",
                        }
                    },
                },
                //y轴配置
                yAxis: {
                    axisLine:{//线
                        show:false
                    },
                    axisTick:{//刻度
                        show:false
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        textStyle: {
                            color: "#909AAA",
                        }
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                            width: 1,
                            color:'#E9E9E9',
                        },
                        show: true, //隐藏或显示
                    },
                },
                //系列的设置：图表的类型和数据
                series:[
                    {
                        name: '我的抽成',
                        type:'bar',//图标类型 bar：柱状图，line：折线图
                        data:this.commission,//数据
                        stack: 'yj',
                        color:'#39486F',//颜色
                        barWidth: 6,//柱子宽度
                        itemStyle: {
                            normal: {
                                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                barBorderRadius:[0, 0, 6, 6]
                            }
                        }
                    },
                    {
                        name: '商务业绩',
                        type:'bar',//图标类型 bar：柱状图，line：折线图
                        data:this.performance,//数据
                        stack: 'yj',
                        color:'#DFE4ED',//颜色
                        barWidth: 6,//柱子宽度
                        itemStyle: {
                            normal: {
                                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                                barBorderRadius:[6, 6, 0, 0]
                            }
                        }
                    },
                ],
                //图表的间距
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 30,
                    top: 50,
                    containLabel: true,
                },

            })
        },

        // 成交单量图表
        closingDeal(){
            const closingDealCharts = echarts.init(document.getElementById('closingDeal'));
            closingDealCharts.setOption({
                //提示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type:'none',
                    },
                    backgroundColor:'rgba(0,0,0,0.8)',
                    padding: [11, 20],
                    formatter: `
                        <div class="tooltip-box closing">
                            <h3>{b}</h3>
                            <p>
                                <i></i><b>{a}</b><b>{c}</b>
                            </p>
                        </div>
                    `,
                },
                //图例
                legend: {
                    data: ['成交单量'],
                    left:0,
                    icon: "circle",
                    itemWidth: 8, //矩形宽度
                    itemHeight: 8, //矩形高度
                },
                //x轴配置
                xAxis:{
                    //数据
                    data: this.closingDealX,
                    axisLine:{//线
                        show:false
                    },
                    axisTick:{//刻度
                        show:false
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        textStyle: {
                            color: "#909AAA",
                        }
                    },
                },
                //y轴配置
                yAxis: {
                    axisLine:{//线
                        show:false
                    },
                    axisTick:{//刻度
                        show:false
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        textStyle: {
                            color: "#909AAA",
                        }
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
                            width: 1,
                            color:'#E9E9E9',
                        },
                        show: true, //隐藏或显示
                    },
                },
                //系列的设置：图表的类型和数据
                series:[
                    {
                        name: '成交单量',
                        type:'line',//图标类型 bar：柱状图，line：折线图
                        data:this.closingDealList,//数据
                        color:'#E6772D',//颜色
                        smooth: true,//平滑过渡
                        symbol: 'none',//取消拐点
                    },
                ],
                //图表的间距
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 30,
                    top: 50,
                    containLabel: true,
                },
            })
        }
    },
}
</script>

<style scoped>
h3,h4,p,ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 四块区域 */
.data-box h3{
    font-size: 16px;
    font-weight: 600;
    color: #2E405E;
    margin: 20px 0;
}

.data-box ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.data-box ul li{
    width: 22%;
    border: 1px solid #E4E4E4;
    padding: 15px;
    border-radius: 4px;
}
.data-box ul li>h4{
    font-size: 12px;
    font-weight: 400;
    color: #2E405E;
    margin-bottom: 20px;
}
.data-box ul li>div{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}
.data-box ul li>div p{
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
    color: #2E405E;
}
.data-box ul li>div p>i{
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
}
.data-box ul li>div>span{
    font-size: 12px;
    font-weight: 400;
    color: #73829C;
    margin-bottom: 6px;
    margin-left: auto;
}

/* 商务业绩图表 */
.chart-box{
    margin: 30px 0;
}
/* 提示框的样式 */
::v-deep .chart-box .tooltip-box p,
::v-deep .chart-box .tooltip-box h3{
    margin: 0;
    padding: 0;
}
::v-deep .chart-box .tooltip-box h3{
    font-size: 12px;
    margin-bottom: 10px;
}
::v-deep .chart-box .tooltip-box p{
    display: flex;
    align-items: center;
    line-height: 30px;
}
::v-deep .chart-box .tooltip-box b{
    font-weight: 400;
}
::v-deep .chart-box .tooltip-box p>b:nth-child(2){
    margin-right: 30px;
}

::v-deep .chart-box .tooltip-box i{
    display: block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #DFE4ED;
}
::v-deep .chart-box .tooltip-box p:nth-child(3)>i{
    background-color: #39486F;
}
::v-deep .chart-box .tooltip-box.closing p>i{
    background-color: #E6772D;
}

</style>